<template>
    <example :template-code="templateString">
        <template #describe>
            <t id="动态构造计算公式">结合<span class="d-code">&lt;sib-form&gt;</span>动态构造计算公式</t>
            <li>
                <span class="d-code">variables</span>
                默认变量列表；其形式为：
                <span class="s-code">[{ name: '数值1', key: 'number1', ..., }]</span>，
                <span class="s-code">name</span>表示变量名称, <span class="s-code">key</span>代表代入计算时的变量字段
            </li>
            <li><span class="d-code">variable-deleteable</span>是否允许删除变量</li>
        </template>
        <div class="formula-box">
            <sib-formula :variables="variables" :variable-deleteable="false" @complete="handlerComplete"></sib-formula>
            <sib-form v-if="isUpdated" :is-submit="false" :is-reset="false" :fields="fields"></sib-form>
        </div>
    </example>
</template>

<script>
import { ref, nextTick } from 'vue';
import { ElNotification } from 'element-plus';

export default {
    setup() {
        const isUpdated = ref(true);
        const fields = ref([
            {
                label: '数值1',
                code: 'number1',
                type: 'number',
            },
            {
                label: '数值2',
                code: 'number2',
                type: 'number',
            },
            {
                label: '数值3',
                code: 'number3',
                type: 'number',
            },
            {
                label: '数值4',
                code: 'number4',
                type: 'number',
            },
            {
                label: '结果',
                code: 'result',
                type: 'label',
                relationResults: '',
            },
        ]);

        return {
            isUpdated,
            fields,
            variables: fields.value.filter(({ code }) => code !== 'result').map(({ label: name, code: key }) => ({ key, name })),
            handlerComplete({ functionString }) {
                isUpdated.value = false;
                fields.value[4].relationResults = functionString;
                fields.value[4].labelTips = `公式更新为：\n${functionString}`;
                nextTick(() => {
                    isUpdated.value = true;
                    ElNotification({
                        title: '公式应用成功',
                        message: '请在下方修改输入框的值，【结果】将依据定义的公式进行动态变化',
                    });
                });
            },
            templateString: `<template>
    <div class="example-box">
        <sib-formula :variables="variables" :variable-deleteable="false" @complete="handlerComplete"></sib-formula>
        <sib-form v-if="isUpdated" :is-submit="false" :is-reset="false" :fields="fields"></sib-form>
    </div>
</template>

<script>
import { ref, nextTick } from 'vue';
import { ElNotification } from 'element-plus';

export default {
    setup() {
        const isUpdated = ref(true);
        const fields = ref([
            {
                label: '数值1',
                code: 'number1',
                type: 'number',
            },
            {
                label: '数值2',
                code: 'number2',
                type: 'number',
            },
            {
                label: '数值3',
                code: 'number3',
                type: 'number',
            },
            {
                label: '数值4',
                code: 'number4',
                type: 'number',
            },
            {
                label: '结果',
                code: 'result',
                type: 'label',
                relationResults: '',
            },
        ]);

        return {
            isUpdated,
            fields,
            variables: fields.value.filter(({ code }) => code !== 'result').map(({ label: name, code: key }) => ({ key, name })),
            handlerComplete({ functionString }) {
                isUpdated.value = false;
                fields.value[4].relationResults = functionString;
                fields.value[4].labelTips = \`公式更新为：\\n\${functionString}\`;
                nextTick(() => {
                    isUpdated.value = true;
                    ElNotification({
                        title: '公式应用成功',
                        message: '请在下方修改输入框的值，【结果】将依据定义的公式进行动态变化',
                    });
                });
            },
        };
    },
};
<\/script>

<style lang="scss">
.example-box {
    display: flex;
    .sib-form {
        width: 400px;
        margin: auto 0;
        padding: 0 50px;
    }
}
</style>`,
        };
    },
};
</script>

<style lang="scss">
.formula-box {
    display: flex;
    &>.sib-form {
        width: 400px;
        margin: auto 0;
        padding: 0 50px;
    }
}
</style>
